/**
 * Created by Administrator on 2017/12/28 0028.
 */
import React from "react";
import {Button, Icon, InputNumber, Popconfirm, Select, Table} from "antd";

import {uuid} from "@/utils";

// 取消菜品 样式
const disableText = {
    textDecoration: 'line-through',
    opacity: .6
}

export default class ExpandTable extends React.Component {
    state = {
        updateLoading: false,
        tableData: ''
    }

    componentDidMount () {
        this.setState({tableData: this.props.record})
    }

    compareStatus = (record) => {
        return record.status === 'CANCEL' || /^DONE$|^CANCEL$/.test(this.props.record.status);
    };

    updateNum = (record, number) => {
        record.num = number;
        this.forceUpdate();
    }
    foodColumns = [{
        title: '菜品名',
        dataIndex: 'foodName',
        render: (text, record) =>
            <div>
                <span style={record.status === 'CANCEL' ? disableText : null}>{text}</span>
                {/*{record.items && <Icon type="question-circle setmeal-detail-hover" />}*/}
                {record.mealID > 0 && <span>（套餐）</span>}
            </div>

    }, {
        title: '数量',
        dataIndex: 'num',
        render: (text, record) => {
            if (record.cache) {
                return <InputNumber value={record.num} min={1} onChange={number => this.updateNum(record, number)}/>
            } else {
                return (
                    <span style={record.status === 'CANCEL' ? disableText : null}>{text}</span>
                )
            }
        }
    }, {
        title: '价格(￥)',
        dataIndex: 'foodReducedPrice',
    },{
        title: '状态',
        width: 200,
        dataIndex: 'status',
        render: (text, record, index) => {
            const status = {
                /*PREPARING: '备菜',
                 DOING: '正在做菜中',
                 DONE: '已出菜',*/
                CANCEL: '取消'
            }[text]
            if (status) return <span style={{paddingLeft: '8px'}}>{status}</span>;
            return (<Select value={record.type || null}
                            style={{ width: 120 }}
                            onChange={value => {
                                // 判断是否改变 价格类型
                                if (typeof(record.originType) === 'undefined') record.originType = value;
                                record.isChange = record.originType === value;
                                record.type = value;
                                this.forceUpdate();
                            }}
            >
                <Select.Option value={null}>原价</Select.Option>
                <Select.Option value={'GIFT'}>赠送</Select.Option>
            </Select>)

        }
    }, {
        title: '操作',
        width: 200,
        render: (text, record, index) => {
            return (
                <div>
                    <Popconfirm
                        title="确定取消该菜品?"
                        onConfirm={() => this.props.handleCancelFood(record, this.props.record)}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type="danger" disabled={this.compareStatus(record)}>取消</Button>
                    </Popconfirm>
                </div>
            )
        }
    }];
    render () {
        const {record, _updateOrderItem, handleAddFood, handleAddRemark} = this.props;
        record.items.forEach((food) => {
            food.uid = food.id ? food.id : uuid();
        })
        // console.log(record.items)
        const addPrice = record.items.reduce((total, item) =>  {
            if (item.cache) {
                total += item.foodReducedPrice * item.num;
            }
            return total;
        } ,0)
        return (
            <div className="expand-table">
                <div className="order-remark" onClick={() => handleAddRemark(record)}><span>
                        <Icon type="edit"/>
                        <span style={{marginRight: '6px', marginLeft: '10px'}}>订单备注:</span>
                    {record.actionExtra ?
                        <span>{record.actionExtra}</span>
                        : <span className="remark-placeholder">(点击添加备注)</span>}
                    </span>
                </div>
                <Table rowKey="uid"
                       columns={this.foodColumns}
                       dataSource={record.items}
                       pagination={false}
                />
                <div className="space-bar"></div>
                <div className="cook-remark">{record.extra ? <span>
                    <Icon className="cook-remark-icon" type="coffee" />
                    <span style={{marginRight: '6px', marginLeft: '10px'}}>厨房备注:</span>
                        <span>{record.extra}</span>
                    </span>  : ''}
                </div>
                {addPrice !== 0 && <div className="addfood-total">
                    <Icon type="shopping-cart" />
                    <span style={{marginRight: '6px', marginLeft: '10px'}}>{'新增菜品总价: ' + addPrice + '元'}</span>
                </div>}
                <div className="space-bar"></div>
                {!/^DONE$|^CANCEL$/.test(record.status) ? (
                    <div>
                        <Button
                            key="item_add"
                            className="editable-add-btn" onClick={handleAddFood} type="dashed">增加菜品</Button>
                        <Button
                            key="item_submit"
                            className="editable-add-btn" onClick={() => {
                            this.setState({updateLoading: true})
                            _updateOrderItem(record)
                                .then(() => {
                                    this.setState({updateLoading: false});
                                })
                                .catch(() => {
                                    this.setState({updateLoading: false});
                                })
                        }} type="dashed" loading={this.state.updateLoading}>确认</Button>
                    </div>
                ) : ''
                }
            </div>
        )
    }
}